<template>

  <web-table
    :options="options"
    :list-query="listQuery"
  >

    <template #filter-content>

      <user-course-select
        v-model="listQuery.params.courseId"
        class="filter-item"
        placeholder="选择或搜索课程"
        prefix-icon="el-icon-search"
        style="width: 300px"
      />

    </template>

    <template #data-columns>

      <el-table-column
        label="课件名称"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <detail-link :params="{ courseId: scope.row.courseId, fileId: scope.row.fileId }" :title="scope.row.fileName" to="CourseViewWithFile" />
        </template>
      </el-table-column>

      <el-table-column
        label="所属课程"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <detail-link :params="{ courseId: scope.row.courseId, fileId: scope.row.fileId }" :title="scope.row.courseName" to="CourseViewWithFile" />
        </template>
      </el-table-column>

      <el-table-column
        label="最近学习"
        align="center"
        prop="updateTime"
      />

      <el-table-column
        label="学习进度"
        align="left"
        width="120px"
      >
        <template v-slot="scope">

          <div style="display: flex; align-items: center;">
            <el-progress :width="30" :percentage="scope.row.process" :stroke-width="3" :show-text="false" type="circle" />
            <div style="padding-left: 10px">{{ scope.row.process }}%</div>
          </div>

        </template>
      </el-table-column>

    </template>

  </web-table>

</template>

<script>

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        params: {
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/course/file/learn/paging'
      },

      methods: {

      }
    }
  }
}
</script>

<style scoped>

  ::v-deep .search-area{
    display: none;
  }
</style>
